<template>
  <div class="comment-item" v-bind="$attrs">
    <div class="comment-user-info">
      <div class="left">
        <div class="comment-user-info-photo">
          <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3385472845,2539383542&fm=11&gp=0.jpg">
        </div>
        <div class="comment-user-info-detail">
          <div class="comment-user-info-name">
            糕卡娜
          </div>
          <div class="comment-user-info-time">
            8月19日  12:23
          </div>
        </div>
      </div>
      <img class="comment-excellent" src="http://image.xuexiwangzhe.com/Fr5KJr5LY0oKFABXi6crBTflcC1t">
    </div>
    <div class="comment-text">
      单个视频整体等比缩放：高度547，宽度随高度调整
    </div>

    <div class="comment-floder">
      <video v-if="false" 
              class="comment-floder-video" 
              src="@/assets/1.mp4" 
              controls
      ></video>
      <div v-if="true"
            :class="{'comment-floder-img': num === 1, 
                    'comment-floder-img-half': num === 2 || num === 4,
                    'comment-floder-img-between': num >= 3 && num !== 4
                    }"
      >
        <img v-for="item,index in num" 
              :key="index" 
              src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=15569699,4262939754&fm=26&gp=0.jpg"
              @click="preview"
        >
      </div>
      <audio-frequency 
              w="503px" 
              h="90px" 
              fz="18px" 
              v-if="false"
      ></audio-frequency>
    </div>
    
    <div class="comment-more">
      <div class="breadcrumbs-bar">
        <mu-breadcrumbs divider="—">
          <mu-icon value="chevron_right" slot="divider"></mu-icon>
          <mu-breadcrumbs-item 
              class="breadcrumbs-bar-item" 
              v-for="item in items" 
              :key="item.text" 
              :disabled="item.disabled">
              {{item.text}}
          </mu-breadcrumbs-item>
        </mu-breadcrumbs>
      </div>
      <div class="comment-operation">

        <div class="comment">
          <img class="icon" src="https://image.xuexiwangzhe.com/FkCsIyjxizNWjmnPwBjoc6yzn8sb">
          {{ 2 | identText }}
        </div>
        <div class="praise">
          <div v-if="false">
            <img class="icon" src="https://image.xuexiwangzhe.com/FtnKR5ZLrcDjr1SGBw6qnPAvXaeo">
            点赞
          </div>
          <div v-else>
            <img class="icon" src="http://image.xuexiwangzhe.com/FnFikCv99FoqfOLr8Qe2xA9ZJGvY">
            取消赞
          </div>
        </div>
      </div>
    </div>

    <div class="comment-praise-list">
      <img class="icon" src="http://image.xuexiwangzhe.com/FrLZ01MJPtyujheqAqaU9bq7O9ir">
      <div class="comment-praise-people">
        Mew suppasit、缪苏帕、李妹妹、夏林果、马小跳、有哟、苏息、李妹妹、夏林果、马小跳、有AA 等15人觉得很赞
      </div>
    </div>
    <mu-list class="comment-answer-list">
      <mu-list-item v-for="answerItem,answerIndex in 2" 
                    :key="answerIndex" 
                    class="comment-answer-item"
      >
        <mu-list-item-content>
          <mu-list-item-title class="comment-answer-item-title">
            <span style="margin-right:12px;">讲师点评：</span>
            <div class="comment-answer-item-operation">
              <svg style="margin-right: 12px;" t="1615533083512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4824" width="12" height="12"><path d="M512 0C226.742857 0 0 197.485714 0 446.171429c0 138.971429 73.142857 270.628571 190.171429 351.085714L190.171429 1024l226.742857-138.971429c29.257143 7.314286 65.828571 7.314286 95.085714 7.314286 285.257143 0 512-197.485714 512-446.171429C1024 197.485714 797.257143 0 512 0zM256 512C219.428571 512 190.171429 482.742857 190.171429 446.171429S219.428571 380.342857 256 380.342857c36.571429 0 65.828571 29.257143 65.828571 65.828571S292.571429 512 256 512zM512 512C475.428571 512 446.171429 482.742857 446.171429 446.171429S475.428571 380.342857 512 380.342857c36.571429 0 65.828571 29.257143 65.828571 65.828571S548.571429 512 512 512zM768 512C731.428571 512 702.171429 482.742857 702.171429 446.171429s29.257143-65.828571 65.828571-65.828571c36.571429 0 65.828571 29.257143 65.828571 65.828571S804.571429 512 768 512z" p-id="4825" fill="#999999"></path></svg>
              <svg t="1615533040020" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2609" width="12" height="12"><path d="M880 224H144a48 48 0 0 1 0-96H384a64 64 0 0 1 64-64h128a64 64 0 0 1 64 64h240a48 48 0 0 1 0 96zM832 832a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V288h640V832zM448 464a48 48 0 0 0-96 0v288a48 48 0 0 0 96 0v-288z m224 0a48 48 0 0 0-96 0v288a48 48 0 0 0 96 0v-288z" p-id="2610" fill="#999999"></path></svg>
            </div>
          </mu-list-item-title>
          <mu-list-item-sub-title class="comment-answer-item-sub-title">
            根据对比来思考并不会让人逻辑混乱，因为即使是对比也可以联结称一个和谐的整体。有些概念只有通过它的对立面才能成为现实，比如“上”连。
          </mu-list-item-sub-title>


          <mu-list class="answer-reply-list">
            <mu-list-item class="answer-reply-item" 
                          v-for="replyItem,replyIndex in 2" 
                          :key="replyIndex"
            >
              <div class="answer-reply-item-content">
                <div>猫哥：</div>
                <div class="reply-content">根据对比来思考并不会让人逻辑混乱，因为即使是对比也可以联结称一个和谐的整体。根据对比来思考并不会让人逻辑混乱，因为即使是对比也可以联结称一个和谐的整体。根据对比来思考并不会让人逻辑混乱，因为即使是对比也可以联结称一个和谐的整体。根据对比来思考并不会让人逻辑混乱，因为即使是对比也可以联结称一个和谐的整体。根据对比来思考并不会让人逻辑混乱，因为即使是对比也可以联结称一个和谐的整体。</div>
              </div>
            </mu-list-item>
          </mu-list>

        </mu-list-item-content>
      </mu-list-item>
    </mu-list>
  </div>
</template>

<script>
import AudioFrequency from "./audio-frequency";

export default {
  filters: {
    identText(val) {
      switch(val) {
        case 0:
          return "领导点评";
        case 1:
          return "讲师点评";
        default: 
          return "评论";
      }
    }
  },
  components: {
    AudioFrequency
  },
  data() {
    return {
      num: 3,
      items: [
        {
          text: '#绩效管理训练营',
          disabled: false
        },
        {
          text: '签到',
          disabled: false
        }
      ]
    }
  },
  created() {
  },
  methods: {
    preview() {
      this.$emit("previewImg")
    }
  }
}
</script>

<style lang="less" scoped>
.comment-item {
  padding-top: 48px;

  .comment-user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
    }
    .comment-excellent {
      width: 33px;
      height: 33px;
    }
  }
  .comment-user-info-photo {
    width: 48px;
    height: 48px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .comment-user-info-detail {
    margin-left: 15px;
  }
  .comment-user-info-name {
    font-size: 15px;
    font-weight: 600;
  }
  .comment-user-info-time {
    margin-top: 3px;
    color: #999999;
    font-size: 12px;
  }
  .comment-text {
    margin-top: 12px;
  }

  img {
    cursor: pointer;
  }
  .comment-floder {
    margin-top: 9px;
  }
  .comment-floder-video {
    height: 410px;
    outline: none;
  }
  .comment-floder-img-half {
    display: flex;
    flex-wrap: wrap;
    img {
      width: calc(calc(100% / 2) - 6px);
      margin: 3px;
      box-sizing: border-box;
    }
  }
  .comment-floder-img-between {
    display: flex;
    flex-wrap: wrap;
    img {
      width: calc(calc(100% / 3) - 6px);
      margin: 3px;
      box-sizing: border-box;
    }
  }


  .comment-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .breadcrumbs-bar {
    /deep/ .mu-breadcrumbs-divider {
      padding: 0;
    }
    .breadcrumbs-bar-item {
      color: #265cff;
    }
  }

  .comment-operation {
    color: #999999;
    display: flex;

    .icon {
      width: 21px;
      height: 21px;
      vertical-align: middle;
      position: relative;
      bottom: 1px;
    }
    .comment {
      cursor: pointer;
    }
    .praise {
      margin-left: 24px;
      cursor: pointer;
    }
  }

  .comment-praise-list {
    display: flex;
    line-height: 17px;

    .icon {
      width: 15px;
      height: 15px;
    }
    .comment-praise-people {
      font-size: 12px;
      font-weight: 600;
      color: #525D7F;
      margin-left: 6px
    }
  }


  .comment-answer-list {
    margin-top: 20px;
    background: #F2F2F2;
    border-radius: 5px;
  }
  .comment-answer-item {
    margin-top: 8px;
    /deep/ .mu-item {
      height: auto;
    }
    
    .comment-answer-item-title {
      font-size: 12px;
      font-weight: 600;
      color: #525D7F;
      display: flex;
      
      .comment-answer-item-operation {
        display: none;
        svg {
          cursor: pointer;
        }
      }
    }
    &:hover {
      .comment-answer-item-operation {
        display: block;
      }
    }
    .comment-answer-item-sub-title {
      color: #333333;
      font-size: 12px;
    }
  }

  .answer-reply-list {
    padding-left: 20px;
    font-size: 11px;
    margin-top: 8px;
  
    .answer-reply-item {
      line-height: 24px;  
      color: #999999;
      &:hover {
        background: #e7e7e7;
      }
      
      .answer-reply-item-content {
        width: 100%;
        display: flex;
        color: #525D7F;
        .reply-content {
          color: #666666;
          flex: 1 ;
        }
      }
    }
  }
}

</style>